Vue.js概览
Vue官网,有问题多查官方文档.
環境搭建
Win10下安裝NVM,利用NVM來管理Node.js的版本,切換淘寶源,安裝Node.js與NPM。浏览器使用Chrome,IDE使用VScode
内容概述
基础篇:Vue核心知识点
生态篇:大型Vue项目所需的周边技术
实战篇:开发基于Vue的Ant Design Pro
福利篇:Vue3.0相关知识介绍
环境搭建
- 命令行操作: 先 $npm install -g @vue/cli 再 $ vue ui
vue-router
在SPA中,路由是组件之间的切换,路由模块的本质是建立组件与页面之间的映射关系.SPA的路由是只更新视图而不重新请求页面.根据mode参数不同可以选择Hash模式和History模式.
Hash模式:
默认模式,通过锚点值的改变,根据不同的值,渲染指定的DOM位置不同的数据.原理是通过onhaschange事件,监听Hash值的变化.
History模式:
路由配置规则,添加"mode:'history'"
//main.js
const router = new VueRouter ({
mode: 'history',
routes:[....]
})
环境搭建
环境搭建:Windows 10 专业版 + Node.js + NPM + Google Chrome + $npm i -g @vue/cli
项目创建:$vue create demo + $cd demo + $yarn serve + $vue ui
Vue CLI 3 提供图形化界面,提供插件,Vue CLI有几个独立的部分组成:CLI是一个全局安装的npm包,提供终端的Vue命令.CLI服务是一个开发环境依赖,一个npm包,局部安装在每个@vue/cli创建的项目中,包含加载其他CLI插件的核心服务,一个优化过的内部webpack配置,项目内部的vu-cli-service命令,提供serve,build和Inspect命令.
项目结构
├── node_modules # 项目依赖包目录
├── public
│ ├── favicon.ico # ico图标
│ └── index.html # 首页模板
├── src
│ ├── assets # 样式图片目录
│ ├── components # 组件目录
│ ├── views # 页面目录
│ ├── App.vue # 父组件
│ ├── main.js # 入口文件
│ ├── router.js # 路由配置文件
│ └── store.js # vuex状态管理文件
├── .gitignore # git忽略文件
├── .postcssrc.js # postcss配置文件
├── babel.config.js # babel配置文件
├── package.json # 包管理文件
└── yarn.lock # yarn依赖信息文件
- CLI插件是向你的Vue项目提供可选的功能的npm包.起步: $yarn global add@vue/cli $vue create vuecli $vue ui列表项目
- 快速原型开发,使用vue serve和vue build命令对单个*.vue文件进行快速原型开发,先$npm install -g @vue/cli-service-global目
- vue serve 命令可以在零配置下为.js或.vue文件启动一个服务器 $serve -o;打开浏览器 $serve -c; 将本地URL复制到剪切板 $serve -h;帮助 例子:$vue serve hello.vue
- vue build $build -t;构建目标 $build -n;库的名字 $build -d;输出目录 $build -h;输出用法信息 例子:$vue vue build hello.vue
插件和Preset
-
每个CLI插件都会包含一个(用于创建文件的)生成器和一个(用来调整webpack核心配置和注入命令的)运行时插件
$vue add @vue/eslint
-
Vue CLI Preset是一个包含新项目所需要预定义选项的插件的JSON对象,让用户无需在命令提示中选择它们.
vue-cli-service serve --open 在浏览器启动时打开浏览器 vue-cli-service serve --copy 在浏览器启东时讲URL复制到剪切板 vue-cli-service serve --mode 指定环境模式(默认值development) vue-cli-service serve --host 指定host vue-cli-service build --mode 指定环境模式 Vue Devtools
## Vue学习顺序 ##
- 扎实的HTML/CSS/JavaScript基本功.
- 跟随官方教程基础篇/进阶篇.
- NVM/Node.js/Vue-cli/Vue-Router/Vuex
Mock.js的使用
安装Mock.js $npm i Mockjs -s 在main.js的同级目录下创建一个Mock.js
const Mock = require('mockjs')
Mock.mock('/register', function (options) {
console.log(options)
return Mock.mock({
'number': '1'
})
})
在main.js中引用: require('./mock')
Vue基础
Vue.js是一套构建用户界面的的渐进式框架,可以自定向上逐层应用.
VUe-CLI3.0的配置
在使用vue-cli3创建项目后,因为webpack的配置均被隐藏了,当你需要覆盖原有的配置时,则需要在项目的根目录下,新建vue.config.js文件,来配置新的配置。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。